1. Field of the Invention
The present invention relates to web application composition technology and, more particularly, to a method and apparatus for solving UI style conflicts in web applications' composition.
2. Description of Related Art
Nowadays, web application composition technologies like Mash-up have been applied more and more widely in web application development. Large numbers of widgets from various web sites are composed to provide more convenient and richer use experiences to the terminal users. Gadget from Google, widgets from Yahoo! And PageFlakers, iWidget from IBM Lotus Mash-Up Center, etc., are the most typical and common products that are widely used currently.
Web application composition can be realized in the manner of static code insertion, for example, by copying and pasting on the code level, or using a certain Include directive in the code, for example, JSP instruction <@ include file=“ . . . ”>. However, the most common method to realize web application composition is dynamic importing, namely, composing external widgets into a local page by using commands like “<script src=” . . . “></script>”.
For the widgets of which the composite page is composed and which come from various sources, a problem that must be faced and solved is how to maintain their original UI styles, e.g., CSS of a web application, without affecting each other.
CSS, namely, Cascading Style Sheet, is a mechanism for defining the presentation (for example, color, typeface, layout, etc.) of a markup language document like an HTML document. When CSS is used in a web application, there are three methods to define CSS in the web application codes: (1) external definition; for example, <link rel=‘stylesheet’ href=‘http://localtest.lotus.com/bss/css/front.css’ type=‘text/css’/>; (2) internal definition; for example, <head><style type=“text/css”>.styleItem1 {color: red; font-size: 10px;}</style></head>; and (3) inline definition; for example, <label style=“color:red; font-size: 10px;”>Hello</label>.
The web page analysis engine in a web browser applies various CSS definitions by using a cascade algorithm of CSS, which usually includes the following rules: (1) an inline definition has a higher priority compared with an external definition and an internal definition; (2) a CSS definition which is nearer to the target element has a higher priority; and (3) Order of Selector.
Due to the cascade algorithm of CSS, duplicate CSS definitions usually result in CSS conflicts, especially for a web application which adopts the Mash-up technology.
For example, when a widget is composed into a local page, the following situations may occur: (1) a CSS definition of the imported widget wrongly affects the CSS effects of the local page; (2) a CSS definition of the local page wrongly affects the CSS effects of the imported widget; and (3) CSS definitions of the imported widget and the local page wrongly affect each others' CSS effects, making both of them undesirable.
FIG. 1 shows an exemplary scenario of a real CSS conflict. The upper part of the figure shows two pages from two companies' web sites respectively. It is desired to compose the two widgets in the two pages together so as to form a composite page as shown in the lower-right part of the figure. However, since CSS definitions of the two widgets have conflicts, a composite page with an undesired UI style as shown in the lower-left part of the figure is formed.
Currently, there are the following two types of methods to solve the CSS conflict problem.
First, namespace appending in build-time, namely, when building the widgets of and the local page composing the composite page, their respective specific identities are added to the respective CSS definitions. In this way, each CSS definition will have a unique name in the composite page, whereby CSS conflict is avoided. This is a widely adopted method and is used by Google, PageFlakers, etc. The method is simple and straightforward, but has the two particular disadvantages. It complicates the code because it has extra requirements for programming, and it increases the difficulty for widgets to communicate with each other because each vendor/provider has its own standard for namespace appending.
A second method includes re-calculating CSS into the inline mode. The method tightly binds the calculated CSS definitions with HTML elements when packaging widgets. Though the method can also solve the problem of CSS conflicts, it has disadvantages. For example: it disobeys the cascading nature of CSS; setting all CSS definitions into “Inline mode” will increase the page size; and if there are changes in global CSS definition, re-calculation must be performed.
In addition, the existing methods are a build-time technology, rather than a run-time technology, and thus increase development costs.